<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>详情页</title>
  <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4093219_csopikavwep.css" />
  <link rel="stylesheet" href="./css/details.css" />
</head>

<body>
  <div class="wrap">
    <header>
      <nav>
        <div class="back">
          <a href="./index.html"><i class="iconfont icon-xiangzuo"></i></a>
        </div>
        <div class="logo">
          <img src="./images/details/logo.png.png" alt="" />
        </div>
        <div class="unfold">
          <i class="iconfont icon-zhankai"></i>
        </div>
      </nav>
    </header>
    <main>
      <div class="banner">
        <img src="./images/details/首图.png" alt="" />
      </div>
      <div class="specification">
        <div class="name">浪漫满屋</div>
        <div class="sale">
          <div class="price">￥229 <span>￥289</span></div>
          <div class="num">已售17229笔</div>
        </div>
        <ul class="spec">
          <li class="specItem">
            <div class="cate">材料</div>
            <div class="info">
              <p>19枝红玫瑰，火龙珠，银叶菊绿叶搭配</p>
            </div>
          </li>
          <li class="specItem">
            <div class="cate">包装</div>
            <div class="info">
              <p>黑色韩式包装</p>
            </div>
          </li>
          <li class="specItem">
            <div class="cate">配送</div>
            <div class="info">
              <p>全国送货上门，市区免运费</p>
            </div>
          </li>
          <li class="specItem">
            <div class="cate">附送</div>
            <div class="info">
              <p>下单填写留言，免费赠送贺卡</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="add">
        <p>数量</p>
        <div class="n">
          <label for="n">-</label>
          <input type="text" name="n" id="n" placeholder="1" />
          <label for="n">+</label>
        </div>
      </div>
      <div class="comment">
        <div class="title">
          <h3>订单评价</h3>
          <p>最近已有1330条评论</p>
        </div>
        <ul class="content">
          <li class="contItem">
            <div class="user">
              <div class="left">
                <img src="./images/details/用户头.png" alt="" />
                <p>147****2479</p>
              </div>
              <img src="./images/details/用户尾.png" alt="" />
            </div>
            <div class="text">
              <p>一大束玫瑰花，老婆非常喜欢。花也很新鲜，推荐大家买</p>
            </div>
            <div class="imgBox">
              <img src="./images/details/评论1.png" alt="" />
            </div>
          </li>
          <li class="contItem">
            <div class="user">
              <div class="left">
                <img src="./images/details/用户头.png" alt="" />
                <p>181****2931</p>
              </div>
              <img src="./images/details/用户尾.png" alt="" />
            </div>
            <div class="text">
              <p>
                鲜花收到了。物流很快，当天就送到了。鲜花太漂亮了，颜色正，包装精美，闺蜜过生日。送给她很喜欢，物美价廉很满意的一次购物。
              </p>
            </div>
            <div class="imgBox">
              <img src="./images/details/评论2.png" alt="" />
            </div>
          </li>
        </ul>
        <div class="moreComment">
          <button>查看更多评价</button>
        </div>
      </div>
      <div class="detail">
        <h2>产品详情</h2>
        <ul class="imgBOx">
          <li><img src="./images/details/详情1.png" alt="" /></li>
          <li><img src="./images/details/详情2.png" alt="" /></li>
          <li><img src="./images/details/详情3.png" alt="" /></li>
        </ul>
      </div>
      <div class="buy">
        <ul class="left">
          <li>
            <a href="./index.html">
              <div class="icon">
                <i class="iconfont icon-shouye"></i>
              </div>
              <p>首页</p>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">
                <i class="iconfont icon-dianhua"></i>
              </div>
              <p>电话</p>
            </a>
          </li>
          <li>
            <a href="./cart-0.html">
              <div class="icon">
                <i class="iconfont icon-gouwuche"></i>
              </div>
              <p>购物车</p>
            </a>
          </li>
        </ul>
        <ul class="right">
          <li>加入购物车</li>
          <li><a href="">立即购买</a></li>
        </ul>
      </div>
    </main>
  </div>
</body>

</html>